<script setup lang="ts">
import { ref } from 'vue';
import type { SelectProps } from 'ant-design-vue';

// 定义 props
const props = defineProps({
    open: {
        type: Boolean,
        required: true,
        default: false
    }
});

// 定义 emit
const emit = defineEmits(['onClose']);

const onCancel = () => {
    emit('onClose');
};

const value = ref<number>(2);

const price = ref('2');
const priceOptions = ref<SelectProps['options']>([
    {
        value: '1',
        label: '¥1 ~ ¥999'
    },
    {
        value: '2',
        label: '¥1,000 ~ ¥1,999'
    },
    {
        value: '3',
        label: '¥2,000 ~ ¥4,999'
    },
    {
        value: '4',
        label: '¥5,000 ~ ¥9,999'
    },
    {
        value: '5',
        label: '¥10,000 ~ ¥99,999'
    },
    {
        value: '6',
        label: '¥100,000 ~ ¥999,999'
    }
]);

const pax = ref(2);
const paxOptions = ref<SelectProps['options']>([
    {
        value: 1,
        label: '1人'
    },
    {
        value: 2,
        label: '2人'
    },
    {
        value: 3,
        label: '3人'
    },
    {
        value: 4,
        label: '4人'
    },
    {
        value: 5,
        label: '5人'
    },
    {
        value: 6,
        label: '6人'
    },
    {
        value: 7,
        label: '7人'
    },
    {
        value: 8,
        label: '8人'
    }
]);

const message = ref('');

const best_seller = ref(['棒棒鶏涼麺', '麻婆豆腐', 'マンゴーのかき氷', '大車海老料理(3尾) ', '青森県吉浜産干し鮑の上海風白湯醤油煮込み']);
const best_seller_active = ref(['棒棒鶏涼麺', '大車海老料理(3尾) ']);
</script>

<template>
    <a-modal
        :open="open"
        :closable="false"
        :width="888"
        :bodyStyle="{ padding: '14px 0 0' }"
        :footerStyle="{ paddingBottom: '30px' }"
        destroyOnClose
        class="menu-modal !top-[192px]"
        @cancel="onCancel"
    >
        <div class="px-5">
            <p class="mb-6 text-2xl">評価</p>
            <div class="mb-2.5 flex items-center gap-1.5">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M29.8312 15.9979C29.8312 23.6398 23.6412 29.8285 16.0005 29.8285C8.36396 29.8285 2.16992 23.6398 2.16992 15.9979C2.16992 8.35856 8.36396 2.16992 16.0005 2.16992C23.6412 2.16992 29.8312 8.35856 29.8312 15.9979ZM24.0963 11.5623L21.9461 9.41343L12.9805 18.3939L10.0537 15.4576L7.90482 17.6024L12.8901 22.585L12.9805 22.4918L13.0696 22.585L24.0963 11.5623Z"
                        fill="#1AFA29"
                    />
                </svg>
                <span class="text-lg">連絡先</span>
            </div>
            <div class="mb-5 rounded-lg border border-[#494949] bg-[#8686861A] p-4">
                <p class="mb-3">メールアドレスや携帯電話番号を提供して、早めに店舗活動情報を取得します！</p>
                <div class="flex items-center gap-2.5">
                    <span class="shrink-0">メール</span>
                    <a-input placeholder="example@gmail.com" class="!w-[220px] !bg-[#666]"></a-input>
                    <span class="ml-2.5 shrink-0">電話番号 </span>
                    <a-input placeholder="09012345678" class="!w-[220px] !bg-[#666]"></a-input>
                </div>
            </div>
            <div class="mb-2.5 flex items-center gap-1.5">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M29.8312 15.9979C29.8312 23.6398 23.6412 29.8285 16.0005 29.8285C8.36396 29.8285 2.16992 23.6398 2.16992 15.9979C2.16992 8.35856 8.36396 2.16992 16.0005 2.16992C23.6412 2.16992 29.8312 8.35856 29.8312 15.9979ZM24.0963 11.5623L21.9461 9.41343L12.9805 18.3939L10.0537 15.4576L7.90482 17.6024L12.8901 22.585L12.9805 22.4918L13.0696 22.585L24.0963 11.5623Z"
                        fill="#1AFA29"
                    />
                </svg>
                <span class="text-lg">評価内容</span>
            </div>
            <div class="mb-3 flex gap-10 border border-[#494949] bg-[#8686861A] p-4">
                <div class="shrink-0">
                    <p>総合</p>
                    <div class="flex items-center">
                        <a-rate v-model:value="value" allow-half class="!text-[#FF6A00]" />
                        <a-input-number v-model:value="value" :min="0" :max="5" :step="0.1" class="!bg-[#666] !text-[#FF6A00]" />
                    </div>
                </div>
                <div class="shrink-0">
                    <p>使った金額 </p>
                    <div class="flex items-center gap-1.5">
                        <a-select v-model:value="price" :options="priceOptions" />
                        <a-select v-model:value="pax" :options="paxOptions" />
                    </div>
                </div>
            </div>
            <a-textarea
                class="!mb-5 flex-1 !border-[#494949] !bg-[#8686861A] !text-xs"
                v-model:value="message"
                placeholder="口コミ本文を入れてください（5,000文字以下）"
                :auto-size="{ minRows: 9, maxRows: 9 }"
                :maxlength="5000"
            />
            <div class="mb-2.5 flex items-center gap-1.5">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M29.8312 15.9979C29.8312 23.6398 23.6412 29.8285 16.0005 29.8285C8.36396 29.8285 2.16992 23.6398 2.16992 15.9979C2.16992 8.35856 8.36396 2.16992 16.0005 2.16992C23.6412 2.16992 29.8312 8.35856 29.8312 15.9979ZM24.0963 11.5623L21.9461 9.41343L12.9805 18.3939L10.0537 15.4576L7.90482 17.6024L12.8901 22.585L12.9805 22.4918L13.0696 22.585L24.0963 11.5623Z"
                        fill="#1AFA29"
                    />
                </svg>
                <span class="text-lg">おすすめ料理</span>
            </div>
            <div class="mb-7 flex flex-wrap gap-3">
                <template v-for="seller in best_seller" :key="seller">
                    <div
                        class="flex h-7 items-center gap-1.5 rounded-full bg-[#5C5C5C54] px-3 text-[#CFCFCF]"
                        :class="{ 'bg-[#FF63631F] text-[#EB3942]': best_seller_active.includes(seller) }"
                    >
                        <i class="fantec_font ft_LikeOutlined block !text-xs"></i>
                        <span class="inline-block text-lg">{{ seller }}</span>
                    </div>
                </template>
            </div>
        </div>
        <template #footer>
            <div class="px-5">
                <a-button class="btn-bg-gradient !h-15 !rounded-[14px] !text-lg" type="primary" block>同意して投稿</a-button>
            </div>
        </template>
    </a-modal>
</template>

<style lang="scss" scoped>
:deep(.ant-select) {
    &:not(.ant-select-customize-input) .ant-select-selector {
        background-color: #666;
        border: 1px solid #666;
    }
}

:deep(.ant-input-number) {
    .ant-input-number-handler-wrap {
        background-color: #666;
    }
}
</style>
